<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>index page</title>
  <script src="/js/axios.min.js"></script>
</head>
<body>
<h1>index page</h1>
<table id="user_table" th:fragment="user_list" border="1">
  <tr>
    <th>id</th>
    <th>username</th>
    <th>password</th>
    <th colspan="2">actions</th>
  </tr>
  <tr th:each="user : ${users}">
    <td th:text="${user.id}">id</td>
    <td th:text="${user.username}">username</td>
    <td th:text="${user.password}">password</td>
    <td><a href="">edit</a></td>
    <td><a href="">remove</a></td>
  </tr>
</table>
<script>
  // Vue
  axios.get('user/queryAll').then(res => {
    console.log(res.data);
    document.getElementById('user_table').innerHTML = res.data;
  }).catch(err => {
    console.error(err);
  })
</script>
</body>
</html>